<template>
	<section>
		<div class="stdLogin-wp" v-if="status">
			<el-form :inline="true" :rules="rules" ref="formLogin" :model="formLogin" class="demo-form-inline">
			<el-form-item label="姓名" prop="studentName">
				<el-input v-model="formLogin.studentName" placeholder="请输入名字"></el-input>
			</el-form-item>
			<!-- <el-form-item label="班级" prop="grade">
				<el-input v-model="formLogin.grade" placeholder="请输入班级"></el-input>
			</el-form-item> -->
			<div class="startTest">
				<el-form-item>
					<el-button type="primary" @click="startTest">开始答题</el-button>
				</el-form-item>
			</div>
			</el-form>
		</div>
		<!-- 答题时的页面 -->
		<div v-if="status2">
			<el-form  class="demo-form-inline">
				<el-form-item v-for="(i,index) in formTest" :key="index">
					<div class="title-line">{{(index+1)}}、{{i}}</div>
					<el-input type="textarea" v-model="testAns[index]" placeholder="请输入答案"></el-input>
				</el-form-item>
				<div>
					<el-form-item>
						<el-button type="primary" @click="submitAns">交卷</el-button>
					</el-form-item>
				</div>
			</el-form>
		</div>
		  <section v-if="status3">
        	<!--工具条-->
			<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
				<el-form :inline="true">
					<el-form-item>
						<el-input placeholder="姓名"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary">查询</el-button>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="dialogFormVisible = true">新增</el-button>
					</el-form-item>
				</el-form>
			</el-col>
			<!-- 要被判卷的列表 -->
				<el-table :data="stdLists" highlight-current-row v-loading="listLoading" style="width: 100%;">
					<el-table-column type="selection" width="55">
					</el-table-column>
					<el-table-column type="id" prop="id" width="60" label="ID">
					</el-table-column>
					<el-table-column prop="studentName" label="学生姓名" width="180" sortable>
					</el-table-column>
					<el-table-column prop="time" label="考试题目数量" width="200"  sortable>
					</el-table-column>
					<el-table-column prop="grade" label="成绩" width="200"  sortable>
					</el-table-column>
					<el-table-column label="操作" min-width="120" sortable>
					<template slot-scope="scope">
					<el-button size="small" type="info" @click="AutomaticStd(scope.row)">判卷</el-button>
				</template>
			</el-table-column>
		</el-table>
    	</section>

			<!-- 判卷时显示的页面 -->
			<section>
				<div v-if="status4">
					<el-form  class="demo-form-inline">
						<el-form-item v-for="(i,index) in ansArr" :key="index">
							<div class="title-line">{{(index+1)}}、{{i}}</div>
							<el-input type="textarea" v-model="qusArr[index]"></el-input>
							 <el-form-item>
								<el-radio-group v-model="grades[index]" size="medium">
										<el-radio border label="全对"></el-radio>
									<el-radio border label="半对"></el-radio>
									<el-radio border label="不对"></el-radio>
								</el-radio-group>
							</el-form-item>
						</el-form-item>
						<div>
							<el-form-item>
								<el-button type="primary" @click="finishClick">完成</el-button>
							</el-form-item>
						</div>
					</el-form>
				</div>


			</section>


	</section>
</template>

<script>
import {mapActions,mapState} from 'vuex'
  export default {
    data() {
      return {
        formLogin: {
				studentName:'',
				grade:''
				},
				// 学生答题时用的所有数据
				once:{
					studentName:'',
					grade:'未判卷',
					testContent:'',
					uid:''
				},
				status:true,
				status2:false,
				status3:false,
				status4:false,
				rules:{
					studentName:[
						{ required: true, message: '请输入姓名', trigger: 'blur'}
					],
					grade:[
						{ required: true, message: '请输入所在班级', trigger: 'blur'}
					]
				},
				formTest:[],
				testAns:[],
				stdData:[],
					listLoading:false,
					ansArr:[],
					qusArr:[],
					grades:[],
					upGradeId:'',
					id:''
				}
				// 老试判卷时的数据
			
			
	},
	computed:{
		...mapState({
			lists:state => state.teacher.lists,
			stdLists:state => state.student.stdLists
		})
	},
    methods: {
		...mapActions([
			'getUserData','addStudData','getStdDataAll','updateStdData'
		]),
      submitAns() {
		  this.testAns=this.formTest.concat(this.testAns)
		  this.once.testContent = JSON.stringify(this.testAns )
			this.addStudData(this.once)
			.then( res =>{
				// this.formTest =[]
				 this.status = true
				  this.status2 = false
				alert('交卷成功')
			})
		},
		// 开始答卷
	  startTest(){
		  this.status2 = true
			this.status = false
		  let arr = JSON.parse(JSON.stringify(this.lists))
			this.formTest = JSON.parse(arr[arr.length-1].testDesc)
			this.once.uid = arr[arr.length-1].id
		   this.once.studentName =  this.formLogin.studentName 
		    //  this.once.grade =  this.formLogin.grade 
		},
		// 判卷的时候调取数据
		getStdList(id){
			this.getStdDataAll(id)
		},
		// 判卷时的页面显示
		AutomaticStd(item){
			this.upGradeId = item.id
			this.status3 = false
			let aa = JSON.parse(JSON.stringify(item.testContent))
			this.stdData= JSON.parse(aa)
			this.ansArr =this.stdData.filter(function(val,index){
				return index < 3 
			})
			this.qusArr =this.stdData.filter(function(val,index){
			return index>2 
			})
			this.status4 = true
			console.log(this.qusArr,this.ansArr)
		},
		// 判卷完成
		finishClick(){
			let count = 0;
				for(var i=0;i<this.grades.length;i++){
					if(this.grades[i]=='全对'){
							count+=1
					}else if(this.grades[i]=='半对'){
								count+=0.5
					}else{
					}
				}
				let obj={}
				obj.id=this.upGradeId
				obj.count = count
			 this.updateStdData(obj)
			 this.status4 = false
			 this.status3 = true
			 this.getStdList(this.id)
		}
	},
		mounted(){
			this.getUserData()
		},
		beforeRouteEnter (to, from, next) {
			next(vm =>{
				if(vm.$route.query.item){
					vm.status2 = false
					vm.status = false
					vm.status3 = true
						vm.id=vm.$route.query.item.id
					vm.getStdList(vm.id)
					// vm.stdData = vm.stdLists
				}else{
					vm.status = true
				}
			})
		}
  }
</script>
<style>
.stdLogin-wp{
	width: 400px;
	margin: 50px auto;
}
.title-line{
	background:#20A0FF;
	margin-bottom: 4px;
	border-radius: 4px;
}
.startTest{
	margin-left: 50px
}

</style>
